<template>
  <div class="wodeyy xiaobanxin tanxin">
    <div class="wd_l">
      <div class="fenlei">
        <h3>云音乐特色榜</h3>
        <ul>
          <li
            @click="indexs(index, item)"
            :class="{ active: xaunzhong == index }"
            v-for="(item, index) in tesebangdan.slice(0, 4)"
            :key="index"
          >
            <img :src="item.coverImgUrl" alt="" />
            <div>
              <p>{{ item.name }}</p>
              <span>{{ item.updateFrequency }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="fenlei">
        <h3>全球媒体榜</h3>
        <ul>
          <li
            @click="indexs(index, item)"
            v-for="(item, index) in tesebangdan.slice(4, 45)"
            :key="index"
          >
            <img :src="item.coverImgUrl" alt="" />
            <div>
              <p>{{ item.name }}</p>
              <span>{{ item.updateFrequency }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="wd_r">
      <div class="wd_r_t tanxin">
        <div class="yyfdengmian">
          <img :src="this.tesebangdan[xaunzhong].coverImgUrl" alt="" />
        </div>
        <div class="bofangquyu">
          <h3>{{ this.name }}</h3>
          <div class="yonghu">
            <img src="" alt="" />
            <span>最近更新</span>
            <span> {{ this.genxin }}</span>
          </div>
          <div class="btn">
            <button @click="bofang">播放</button>
            <button>收藏</button>
            <button>分享</button>
            <button>下载</button>
            <button>评论</button>
          </div>
        </div>
      </div>
      <div class="wd_r_b">
        <div class="tanxin">
          <div class="tanxin">
            <h3>歌曲列表</h3>
            <span>0首</span>
          </div>
          <div>播放</div>
        </div>
        <div>
          <table>
            <tbody>
              <tr>
                <th></th>
                <th>歌曲标题</th>
                <th>时长</th>
                <th>歌手</th>
                <th>专辑</th>
              </tr>
              <tr v-for="(item, index) in gequ" :key="index">
                <td>{{ index + 1 }}</td>
                <td class="td1">
                  <img :src="index <= 2 ? item.al.picUrl : ''" alt="" />
                  {{ item.name }}
                </td>
                <td>4:30</td>
                <td>{{ item.ar[0].name }}</td>
                <td>六六六</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pinglung">
          <div class="tanxin">
            <div class="tanxin">
              <h3>歌曲评论</h3>
              <span>共0评论 </span>
            </div>
          </div>
          <div class="pinglunqu">
            <img src="../../assets/images/logo.png" alt="" />
            <input type="text" placeholder="评论" />
          </div>
          <button class="btn">评论</button>
        </div>
        <div>
          <ul>
            <li>
              <div>
                <img src="" alt="" />
              </div>
              <div>
                <p></p>
                <div>
                  <span></span>
                  <div>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqTopList,
  reqPlayList,
  reqCommentPlayList,
  BofangyyApi,
} from "@/request/api";
import {} from "@/request/api";
export default {
  data() {
    return {
      gequ: false,
      //特色榜
      tesebangdan: [],
      //选中
      xaunzhong: 0,
      //更新状态
      name: "飙升榜",
      genxin: "每天更新",
      id: "3778678",
      //歌曲
      gequ: [],
      //歌曲id
      gequId: [],
      //歌曲地址
      gequurl: [],
    };
  },
  methods: {
    //active
    xianshi() {
      this.gequ = !this.gequ;
    },
    //下标
    indexs(index, item) {
      this.xaunzhong = index;
      this.name = item.name;
      this.genxin = item.updateFrequency;
      sessionStorage.setItem("getMenu", item.id);
      this.id = sessionStorage.getItem("getMenu");
      console.log(this.id);
      reqPlayList({ id: this.id }).then((res) => {
        this.gequ = res.data.songs;
        console.log(res);

        this.$router.go(0);
      });

      console.log(this.gequId);
    },
    //播放
    bofang() {
      this.$store.commit("chageyinyue", []);
      this.gequ.forEach((item) => {
        this.gequId.push(item.al.id);
        console.log(this.gequId);
      });
      BofangyyApi({
        id: this.gequId.toString(),
        level: "lossless",
      }).then((res) => {
        this.gequurl = res.data.data[0];
        this.$store.commit("chageyinyue", this.gequurl);
        console.log(res);
      });
    },
  },
  created() {
    reqTopList().then((res) => {
      this.tesebangdan = res.data.list;
      this.tesebangdan = this.tesebangdan;
      console.log(this.tesebangdan);
      console.log(this.quanqoumeiti);
    });
    reqPlayList({ id: this.id }).then((res) => {
      this.gequ = res.data.songs;
      console.log(this.gequ);
    });
    reqCommentPlayList({ id: this.id }).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/base.less";
.wodeyy {
  .wd_l {
    width: 340px;
    // height: 1000px;
    background-color: rgb(219, 212, 212);
    .fenlei {
      width: 100%;
      margin-left: 10px;
      h3 {
        margin: 10px 0;
        font-weight: normal;
      }
      ul {
        li {
          display: flex;
          margin: 10px 0;
          &.active {
            background-color: rgb(160, 153, 153);
          }
          img {
            width: 80px;
          }
          p {
            font-weight: bolder;
            margin-left: 10px;
            margin-bottom: 20px;
          }
          span {
            margin-left: 10px;
            color: rgb(153, 142, 142);
          }
        }
      }
    }
  }
  .wd_r {
    width: 700px;
    // height: 1000px;
    background-color: #ccc;
    .yyfdengmian {
      margin-left: 100px;
      margin-top: 30px;
      border: 1px solid #ccc;
      img {
        width: 180px;
      }
    }
    .bofangquyu {
      width: 350px;
      height: 180px;
      margin-top: 50px;
      .yonghu {
        margin-top: 30px;
      }
      .btn {
        margin-top: 30px;
        button {
          width: 50px;
          height: 30px;
          margin-right: 10px;
          border: none;
          cursor: pointer;
          &:nth-of-type(1) {
            background-color: skyblue;
          }
          &:hover {
            background-color: aqua;
          }
        }
      }
    }
  }
}
.wd_r_b {
  width: 100%;

  table {
    box-sizing: content-box;
    width: 100%;
    border: 1px solid #ccc;

    tr {
      th {
        border: 1px solid #333;
      }
      td {
        border: 1px solid #333;
        margin: 15px 0px;
        margin: auto;
        img {
          width: 30px;
        }
      }
      .td1 {
        width: 300px;
      }
    }
  }
  .pinglung {
    .pinglunqu {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
      }
      input {
        width: 500px;
        height: 70px;
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      width: 50px;
      height: 30px;
      float: right;
    }
  }
}
</style>